<template>
    <view class="content" :style="{height:height+'px'}">
        <view class="top">
            <view class="steps-wrap">
                <view class="steps-line"/>
                <view class="steps">1</view>
                <text class="steps-text">实名信息</text>
            </view>
            <view class="steps-wrap">
                <view class="steps-line"/>
                <view class="steps">2</view>
                <text class="steps-text">绑定银行卡</text>
            </view>
            <view class="steps-wrap">
                <view class="steps-line" style="border-color: #cccccc"/>
                <view class="steps" style="background: #cccccc">3</view>
                <text class="steps-text" style="color: #cccccc">开户成功</text>
            </view>
        </view>
        <view class="input-wrap"
              style="border-top: 1px solid rgba(227, 227, 227, 1);background: white;margin-top: 40upx">
            <input v-model="smsCode" type="number" maxlength="6" style="text-align: left" placeholder="请输入验证码"/>
            <button type="warn" size="mini" class="code-button" :disabled="time!=60" @click="getCode">
                {{time==60?'获取验证码':time+'s后重试'}}
            </button>
        </view>
        <button type="warn" class="sub-button" @click="next">
           提交
        </button>
    </view>
</template>

<script>
    import API from '../../common/api.js';
    export default {
        data() {
            return {
                smsCode:'',
                time:60,
                timer:null,
            }
        },
        onLoad() {
          // this.setTime()
        },
        methods: {
            next(){
                let stepsData=JSON.parse(uni.getStorageSync('stepsData'));
                API.bankAccountOpenVerify({bindCard:stepsData.bindCard,token:uni.getStorageSync('token'),smsCode:this.smsCode}).then(res=>{
                    if(res.status==200){
                        if(res.data.returnCode==0){

                        }else{
                            uni.showModal({
                                title: '提示',
                                content:res.data.returnMsg,
                                showCancel: false,
                            });
                        }
                    }else{
                        uni.showModal({
                            title: '提示',
                            content:'提交失败',
                            showCancel: false,
                        });
                    }
                })
            },
            getCode(){
                let stepsData=JSON.parse(uni.getStorageSync('stepsData'));
                API.bankAccountOpenResend({bindCard:stepsData.bindCard,token:uni.getStorageSync('token')}).then(res=>{
                    if(res.status==200){
                        if(res.data.returnCode==0){
                            uni.showModal({
                                title: '提示',
                                content:res.data.smsSendNo,
                                showCancel: false,
                            });
                           this.setTime()
                        }else{
                            uni.showModal({
                                title: '提示',
                                content:res.data.returnMsg,
                                showCancel: false,
                            });
                        }
                    }else{
                        uni.showModal({
                            title: '提示',
                            content: '请求失败',
                            showCancel: false,
                        });
                    }
                })
            },
            setTime(){
                // uni.showToast({
                //     title: '验证码已发送，请注意查收',
                //     icon: 'none',
                //     duration: 2000
                // });
                this.timer=setInterval(()=>{
                    this.time--
                    if(!this.time){
                        this.time=60
                        clearInterval(this.timer)
                    }
                },1000)
            },
        }
    }
</script>

<style scoped>
    .content {
        height: 100%;
        /*padding-top: 20upx;*/
        background: #F3F3F3;
    }

    .top {
        width: 100%;
        height: 95upx;
        background: white;
        display: flex;
        padding-top: 25upx;
        justify-content: space-around;
    }
    .steps-wrap{
        display:flex;
        flex-direction: column;
        align-items: center;
        width: 33.34%;
    }
    .steps-line{
        width: 33.34%;
        border-bottom: 2px solid #DC5C4B;
        position: absolute;
        margin-top: 25upx;
    }
    .steps {
        z-index:1;
        width: 50upx;
        height: 50upx;
        background: #DC5C4B;
        border-radius: 40upx;
        color: rgba(255, 255, 255, 1);
        font-size: 32upx;
        text-align: center;
        font-family: PingFangSC-regular;
    }
    .steps-text{
        font-size: 28upx;
        font-family: PingFangSC-regular;
    }
    .bottom-zero{
        width: 100%;
        height: 300upx;
        background: white;
        padding-top: 80upx;
        margin-top: 40upx;
        text-align: center;
    }
    .img-wrap{
        display: flex;
        justify-content: space-around;
        margin-top: 40upx;
    }
    .bottom-img{
        width: 40%;
    }
    .sub-button{
        width: 98%;
        margin:30upx 0 0 1%;
        background: #D14F43;
        border-radius: 4upx;
    }
    .bottom-one{
        width: 100%;
        color: #647482;
        background: white;
        margin-top: 40upx;
        border-top: 1px solid rgba(227, 227, 227, 1);
    }
    .input-wrap{
        display: flex;
        justify-content: space-between;
        padding: 0 3%;
        border-bottom: 1px solid rgba(227, 227, 227, 1);
    }
    .input-key{
        font-size: 32upx;
        color: #64727f;
        line-height: 112upx;
    }
    input{
        padding:30upx 0;
        color: #5e93c6;
        font-size: 28upx;
        text-align: right;
        font-family: PingFangSC-regular;
        display: inline-block;
    }
    .bottom-two{
        width: 100%;
        text-align: center;
    }
    .pick-time{
        /*background: red;*/
    }
    .pick-button{
        display: inline-block;
        width: 50%;
        border-top:1px solid #E8E8E8;
        border-bottom:1px solid #E8E8E8;

    }
    .bank-value{
        font-size: 28upx;
        line-height: 112upx;
        margin-right: -2%;
    }
    .code-button{
        position: absolute;
        margin-top: 24upx;
        right: 5%;
        border-radius:120upx;
        z-index: 100;
    }
    .safety{
        width:100%;
        height: constant(safe-area-inset-bottom);
        height:env(safe-area-inset-bottom);
    }
</style>
